<!doctype html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row :gutter="10">
        <el-col :span="12">
            <el-card class="box-card my-box">
                <div slot="header" class="clearfix">
                    <span>0x9101(音视频实时传输请求)</span>
                </div>
                <el-form size="mini" :inline="true" label-width="180px">
                    <el-form-item label="SIM">
                        <el-input id="terminalId9101" type="text" v-model="payload9101.sim"/>
                    </el-form-item>
                    <el-form-item label="服务器IP">
                        <el-input id="serverIp9101" type="text" v-model="payload9101.jt1078ServerIp"/>
                    </el-form-item>
                    <el-form-item label="服务器端口(TCP)">
                        <el-input-number :controls="false" v-model="payload9101.jt1078ServerPortTcp"/>
                    </el-form-item>
                    <el-form-item label="服务器端口(UDP)">
                        <el-input-number :controls="false" v-model="payload9101.jt1078ServerPortUdp"/>
                    </el-form-item>
                    <el-form-item label="逻辑通道号">
                        <el-select v-model="payload9101.channelNumber"
                                   clearable
                                   allow-create
                                   filterable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in formConfig.channelTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据类型">
                        <el-select v-model="payload9101.dataType"
                                   clearable
                                   allow-create
                                   filterable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in formConfig.dataType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="码流类型">
                        <el-radio-group v-model="payload9101.streamType" size="mini">
                            <el-radio-button :label="0">主码流</el-radio-button>
                            <el-radio-button :label="1">子码流</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <div>
                        {{ response9101 }}
                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="sendMsg9101">下发指令</el-button>
                    </el-form-item>

                </el-form>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card my-box">
                <div slot="header" class="clearfix">
                    <span>0x9102(音视频实时传输控制)</span>
                </div>
                <el-form size="mini" :inline="true" label-width="180px" label-position="right">
                    <el-form-item label="SIM">
                        <el-input v-model="payload9102.sim"/>
                    </el-form-item>
                    <el-form-item label="逻辑通道号">
                        <el-select v-model="payload9102.channelNumber"
                                   clearable
                                   allow-create
                                   filterable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in formConfig.channelTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="控制指令">
                        <el-select v-model="payload9102.command"
                                   clearable
                                   allow-create
                                   filterable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in formConfig.commandType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关闭音视频类型">
                        <el-select v-model="payload9102.mediaTypeToClose"
                                   clearable
                                   allow-create
                                   filterable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in formConfig.mediaTypeToClose"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="切换码流类型">
                        <el-radio-group v-model="payload9102.streamType" size="mini">
                            <el-radio-button :label="0">主码流</el-radio-button>
                            <el-radio-button :label="1">子码流</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <div>
                        {{ response9102 }}
                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="sendMsg9102">下发指令</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-card class="box-card my-box">
            <div slot="header" class="clearfix">
                <span>Terminal List</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="loadTerminals">刷新</el-button>
            </div>
            <el-table
                    :data="terminalList"
                    style="width: 100%">
                <el-table-column
                        prop="terminalId"
                        label="terminalId"
                >
                </el-table-column>
                <el-table-column
                        prop="version"
                        label="version"
                >
                </el-table-column>
                <el-table-column
                        prop="lastCommunicationTime"
                        label="lastCommunicationTime"
                >
                </el-table-column>
                <el-table-column
                        prop="latestGeo"
                        label="latestGeo"
                >
                </el-table-column>
            </el-table>
        </el-card>

    </el-row>

</div>

</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            terminalList: [],
            payload9101: {
                sim: "018008501119",
                jt1078ServerIp: "127.0.0.1",
                jt1078ServerPortTcp: 61078,
                jt1078ServerPortUdp: 61078,
                channelNumber: 3,
                dataType: 0,
                streamType: 1,
            },
            response9101: "",
            payload9102: {
                sim: "018008501119",
                channelNumber: 3,
                command: 0,
                mediaTypeToClose: 0,
                streamType: 1,
            },
            response9102: "",
            formConfig: {
                dataType: [
                    {value: 0, label: "0--音视频"},
                    {value: 1, label: "1--视频"},
                    {value: 2, label: "2--双向对讲"},
                    {value: 3, label: "3--监听"},
                    {value: 4, label: "4--中心广播"},
                    {value: 5, label: "5--透传"},
                ],
                commandType: [
                    {value: 0, label: "0--关闭音视频传输指令"},
                    {value: 1, label: "1--切换码流"},
                    {value: 2, label: "2--暂停该通道所有流的发送"},
                    {value: 3, label: "3--回复暂停前流的发送,与暂停前的流类型一致"},
                    {value: 4, label: "4--关闭双向对讲"},
                ],
                mediaTypeToClose: [
                    {value: 0, label: "0--关闭该通道有关的音视频数据"},
                    {value: 1, label: "1--只关闭该通道有关的音频,保留该通道有关的视频"},
                    {value: 2, label: "2--只关闭该通道有关的视频,保留该通道有关的音频"},
                ],
                channelTypes: [
                    {value: 1, label: "通道1--驾驶员--音视频/视频"},
                    {value: 2, label: "通道2--车辆正前方--音视频/视频"},
                    {value: 3, label: "通道3--车前门--音视频/视频"},
                    {value: 4, label: "通道4--车厢前部--音视频/视频"},
                    {value: 5, label: "通道5--车厢后部--音视频/视频"},
                    {value: 6, label: "通道6--车后门--音视频/视频"},
                    {value: 7, label: "通道7--行李舱--音视频/视频"},
                    {value: 8, label: "通道8--车辆左侧--音视频/视频"},
                    {value: 9, label: "通道9--车辆右侧--音视频/视频"},
                    {value: 10, label: "通道10--车辆正后方--音视频/视频"},
                    {value: 11, label: "通道11--车厢中部--音视频/视频"},
                    {value: 12, label: "通道12--车中部--音视频/视频"},
                    {value: 13, label: "通道13--驾驶席车门--音视频/视频"},
                    {value: 33, label: "通道33--驾驶员--音频"},
                    {value: 36, label: "通道36--车厢前部--音频"},
                    {value: 37, label: "通道37--车厢后部--音频"},
                ],
            },
        },
        created: function () {
            this.loadTerminals()
        },
        methods: {
            loadTerminals: function () {
                const context = this
                axios.get('/jt808/terminal/list')
                    .then(function (response) {
                        if (response.data && response.data.code === 0) {
                            context.terminalList = response.data.data.records
                        } else {
                            console.log(response)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            sendMsg9101: function () {
                const context = this
                context.response9101 = "..."
                axios.post('/jt808/send-msg/9101', context.payload9101)
                    .then(function (response) {
                        console.log(response)
                        context.response9101 = response.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            sendMsg9102: function () {
                const context = this
                context.response9102 = "..."
                axios.post('/jt808/send-msg/9102', context.payload9102)
                    .then(function (response) {
                        console.log(response)
                        context.response9102 = response.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

        },
        watch: {}
    })
</script>
<style type="text/css">
    .my-box {
        margin-bottom: 10px;
    }
</style>
</html>
